import React, { createRef } from 'react';
import { Modal, Input, Form, Col, Row } from 'antd';
import { FormInstance } from 'antd/lib/form';
import { BackwardOutlined, EnterOutlined } from '@ant-design/icons';

const { confirm } = Modal;

type Props<> = {
  message?: string,
  value?: string,
  setValue?: (value: string) => void,
  visible: boolean,
  setVisible?: (value: boolean) => void,
}


export default function Prompt(props: Props, collback?: (value: undefined | any) => any): Promise<undefined | any> {
  const { setValue, visible, setVisible, message = '变量名称' } = props

  return new Promise((res, rej) => {
    const name = '变量名称'
    const myform = createRef<FormInstance>()
    const myform2 = createRef<Input>()
    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      if (setValue)
        setValue(e.target.value)
    }
    confirm({
      title: message,
      visible,
      content: <Form ref={myform} >
        <Form.Item
          label={name}
          name={name}
          rules={[{ pattern: /^[a-zA-Z]\w{1,80}$/, message: '变量名称不合法' }]}
        >
          <Input type="text" ref={myform2} placeholder="请输入变量名称" onChange={onChange} ></Input>
        </Form.Item>
      </Form>,
      onOk(close) {
        myform.current?.validateFields().then(_e => {
          if (setVisible) {
            setVisible(false)

          }
          res(myform2.current?.props.value)


          close()
        }).catch(_e => {
          console.log(_e)
        })
      },
      okText: '确定',
      cancelText: '取消',
      onCancel() {
        if (setVisible)
          setVisible(false)
        rej()
        if (collback) {
          collback(myform2.current?.props.value)
        }
      },
      maskClosable: false
    });
  })
}

function destroyAll() {
  Modal.destroyAll();
}


export function Prompt2(props: Props, collback?: (value: undefined | any) => any): Promise<undefined | any> {
  const { message = '变量名称' } = props
  return new Promise((res, rej) => {
    const myform2 = createRef<Input>()
    function click(e: number | boolean) {
      if (e === true) {
        if (collback) {
          collback(myform2.current?.state.value)
        }
        destroyAll()
        res(myform2.current?.state.value)

      } else if (e === false) {
        if (myform2.current?.state.value?.length && myform2.current?.setState) {
          myform2.current.setState({
            value: myform2.current.state.value.slice(0, myform2.current.state.value.length - 1)
          })
        }
      } else {
        if (myform2.current?.setState) {
          if (!myform2.current.state.value) {
            myform2.current.setState({
              value: String(e)
            })
          } else {
            myform2.current.setState({
              value: myform2.current.state.value + String(e)
            })
          }

        }
      }
    }


    confirm({
      title: message,
      content: <Form>
        <Form.Item>
          <Input.Password ref={myform2}  ></Input.Password>
        </Form.Item>
        <div className="ruanjianpan">
          <Row>
            <Col className="border" onClick={() => click(1)} span={8}>1</Col>
            <Col className="border" onClick={() => click(2)} span={8}>2</Col>
            <Col className="border" onClick={() => click(3)} span={8}>3</Col>

          </Row>
          <Row>
            <Col className="border" onClick={() => click(4)} span={8}>4</Col>
            <Col className="border" onClick={() => click(5)} span={8}>5</Col>
            <Col className="border" onClick={() => click(6)} span={8}>6</Col>
          </Row>
          <Row>
            <Col className="border" onClick={() => click(7)} span={8}>7</Col>
            <Col className="border" onClick={() => click(8)} span={8}>8</Col>
            <Col className="border" onClick={() => click(9)} span={8}>9</Col>
          </Row>
          <Row>
            <Col className="border" onClick={() => click(0)} span={8}>0</Col>
            <Col className="border" onClick={() => click(false)} span={8}>
              <BackwardOutlined />
            </Col>
            <Col className="border" onClick={() => click(true)} span={8}>
              <EnterOutlined />
            </Col>
          </Row>
        </div>
      </Form>,
      onOk(close) {
        res(myform2.current?.state.value)
        close()
      },
      okText: '确定',
      cancelText: '取消',
      onCancel() {
        rej()
        if (collback) {
          collback(myform2.current?.props.value)
        }
      },
      maskClosable: false
    });
  })
}

